<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="${pageContext.request.contextPath}/webjars/jquery/3.4.1/dist/jquery.min.js"></script>

    <link href="${pageContext.request.contextPath}/css/login/styles.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/login.js"></script>

</head>

<body>

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light ">
        <a class="navbar-brand" href="${pageContext.request.contextPath}/index.jsp">
            <img src="${pageContext.request.contextPath}/images/index/logo.png" alt="#" style="width: 10vw;">
        </a>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">酒店预订</a>
                <a class="nav-item nav-link" href="#">积分商城</a>
                <a class="nav-item nav-link" href="#">关于首旅如家</a>
            </div>

        </div>
    </nav>
</div>

<!-- 登录框 -->
<div class="back">
    <div class="login">
        <h3>登&nbsp;&nbsp;&nbsp;&nbsp;录</h3>
        <br>
        <!-- 登录表单 -->
        <form action="${pageContext.request.contextPath}/LoginServlet" id="loginForm" method="post" onsubmit="return loginCheck()">
            <div class="form-group">
                <div class="inputbox">
                    <img src="${pageContext.request.contextPath}/images/login/u12.png">
                    <input type="text" class="usernameinput" id="username" name="username"
                           autocomplete="off" value="${username}"
                           placeholder="请输入用户名/手机号/邮箱"
                           onfocusout="userCheck(this)" onchange="checkLogUser(this.value)"/>
                </div>
                <div style="height: 10px; margin: 0px;padding: 0px;">
                    <span id="logUserSpan" style="font-size: 12px; color: red; height: 12px">
                        <c:if test="${loginState eq 'userNull'}">
                            用户不存在
                        </c:if>
                    </span>
                </div>


            </div>
            <div class="form-group">
                <div class="inputbox">
                    <img src="${pageContext.request.contextPath}/images/login/u13.png">
                    <input type="password" class="pwdinput" id="password" name="password"
                           autocomplete="off"
                           placeholder="请输入密码"
                           onfocusout="pwdCheck(this)" onchange="checkLogUser(this.value)"/>
                </div>
                <div style="height: 10px; margin: 0px;padding: 0px;">
                    <span id="logpwdSpan" style="font-size: 12px; color: red;height: 12px">
                        <c:if test="${loginState eq 'pwdError'}">
                            密码错误
                        </c:if>
                    </span>
                </div>

            </div>
            <br>
            <p>

                <button class="btn btn-primary" onclick="login()">登录</button>
            </p>
            <p>
                <a href="${pageContext.request.contextPath}/jsp/register.jsp" class="btn btn-primary" style="width: 300px; color: white">注册</a>
            </p>

        </form>
    </div>
</div>
<div class="container-fluid footer">
    © 2021 Homeinns Co.,Ltd All Rights Reserved.酒店管理（上海）有限公司
</div>

</body>

</html>